<!--
 * @Author: meifeng mei.feng@asiainfo-sec.com
 * @Date: 2022-11-17 23:37:39
 * @LastEditors: meifeng mei.feng@asiainfo-sec.com
 * @LastEditTime: 2023-09-23 17:59:37
 * @FilePath: \admin_vue\src\views\Home.vue
 * @Description:
 *
 * Copyright (c) 2023 by ${meifeng}, All Rights Reserved.
-->

<template>
    <div class="home_main">
        <div class="clock_container">
        <div class="clock">
            <div id="time">
                <div class="circle" style="--clr:#ff2972">
                    <div class="dots sec_dot" ref="secdot"></div>
                    <svg>
                        <circle cx="120" cy="120" r="120" id="ss" ref="ss"></circle>
                    </svg>
                </div>
                <div class="circle" style="--clr:#fee800">
                    <div class="dots min_dot" ref="mindot"></div>
                    <svg>
                        <circle cx="100" cy="100" r="100" id="mm" ref="mm"></circle>
                    </svg>
                </div>
                <div class="circle" style="--clr:#04fc43">
                    <div class="dots hr_dot" ref="hrdot"></div>
                    <svg>
                        <circle cx="80" cy="80" r="80" id="hh" ref="hh"></circle>
                    </svg>
                </div>
                <div class="niddles" style="--clr2: #ff2972" id="sc" ref="sc"><i></i></div>
                <div class="niddles niddles2" style="--clr2: #fee800" id="mn" ref="mn"><i></i></div>
                <div class="niddles niddles3" style="--clr2: #04fc43" id="hr" ref="hr"><i></i></div>
                <span class="time_num" style="--i:1"><b>1</b></span>
                <span class="time_num" style="--i:2"><b>2</b></span>
                <span class="time_num" style="--i:3"><b>3</b></span>
                <span class="time_num" style="--i:4"><b>4</b></span>
                <span class="time_num" style="--i:5"><b>5</b></span>
                <span class="time_num" style="--i:6"><b>6</b></span>
                <span class="time_num" style="--i:7"><b>7</b></span>
                <span class="time_num" style="--i:8"><b>8</b></span>
                <span class="time_num" style="--i:9"><b>9</b></span>
                <span class="time_num" style="--i:10"><b>10</b></span>
                <span class="time_num" style="--i:11"><b>11</b></span>
                <span class="time_num" style="--i:12"><b>12</b></span>
            </div>
        </div>
        </div>
        <div class="contain-home">
            <div class="earth"></div>
            <div class="orbit"></div>
        </div>
    </div>
</template>
<script>

export default {
    name: 'Home',
    data() {
        return {
            timeId: null,
        }
    },
    mounted() {
        this.$nextTick(() => {
            this.timeId = setInterval(() => {
                this.renderClock()
            })
        }, 30)
    },
    methods: {
        renderClock() {
            let hh = this.$refs.hh
            let mm = this.$refs.mm
            let ss = this.$refs.ss
            let secdot = this.$refs.secdot
            let mindot = this.$refs.mindot
            let hrdot = this.$refs.hrdot
            let sc = this.$refs.sc
            let mn = this.$refs.mn
            let hr = this.$refs.hr
            let h = new Date().getHours()
            let m = new Date().getMinutes()
            let s = new Date().getSeconds()
            hh.style.strokeDashoffset = 510 - (510 * h) / 12
            mm.style.strokeDashoffset = 630 - (630 * m) / 60
            ss.style.strokeDashoffset = 760 - (760 * s) / 60
            secdot.style.transform = `rotateZ(${s * 6}deg)`
            mindot.style.transform = `rotateZ(${m * 6}deg)`
            hrdot.style.transform = `rotateZ(${h * 30}deg)`
            sc.style.transform = `rotateZ(${s * 6}deg)`
            mn.style.transform = `rotateZ(${m * 6}deg)`
            hr.style.transform = `rotateZ(${h * 30}deg)`
        },
    },
    destroyed() {
        clearInterval(this.timeId)
    },
}
</script>
<style scoped>
.home_main {
    height: 100%;
    width: 100%;
    background: black;
}
.contain-home {
    background: black;
    float: right;
    width: 500px;
    height: 500px;
    position: relative;
    animation: spin 20s linear infinite;
}
.earth {
    width: 200px;
    height: 200px;
    background-image: url('../assets/imgs/earth.png');
    background-size: 100% 100%;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.orbit{
    width: 300px;
    height: 300px;
    /* border: 2px dashed red; */
    position: absolute;
    top: 100px;
    left: 100px;
    border-radius: 50%;
    animation: spin 5s linear infinite;
}
.orbit::after{
    content: "";
    display: block;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: url("../assets/imgs/orbit.png");
    background-size: 100% 100%;
    position: absolute;
    top: 25px;
    left: 10px;
    animation: spin 5s linear infinite;
}
@keyframes spin {
    100% {
        transform: rotate(360deg);
    }
}

.clock_container {
    float: left;
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 600px;
    min-height: 600px;
    overflow: hidden;
    background: #2f363e;
}

.clock {
    position: relative;
    width: 280px;
    height: 280px;
    display: flex;
    justify-content: center;
    align-items: center;
    scale: 2;
    box-shadow: inset 5px 5px 25px rgba(0,0,0,0.25);
    border-radius: 50%;
}
.clock::before {
    content: '';
    position: absolute;
    width: 5px;
    height: 5px;
    background: red;
    z-index: 999;
    border: 1px solid #fff;
    border-radius: 50%;
}
#time {
    position: relative;
    width: 250px;
    height: 250px;
    display: flex;
    justify-content: center;
    align-items: center;
}
#time .circle {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
}
#time .circle svg {
    position: relative;
    transform: rotate(270deg);
}
#time .circle:nth-child(1) svg {
    width: 250px;
    height: 250px;
}
#time .circle:nth-child(2) svg {
    width: 210px;
    height: 210px;
}
#time .circle:nth-child(3) svg {
    width: 170px;
    height: 170px;
}
#time .circle svg circle {
    width: 100%;
    height: 100%;
    fill: transparent;
    stroke: var(--clr);
    stroke-width: 5;
    transform: translate(5px, 5px);
}
#time .circle:nth-child(1) svg circle {
    stroke-dasharray: 760;
    stroke-dashoffset: 760;
}
#time .circle:nth-child(2) svg circle {
    stroke-dasharray: 630;
    stroke-dashoffset: 630;
}
#time .circle:nth-child(3) svg circle {
    stroke-dasharray: 510;
    stroke-dashoffset: 510;
}
.dots {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
}
.dots::before {
    content: '';
    position: absolute;
    top: -3px;
    width: 15px;
    height: 15px;
    background: var(--clr);
    border-radius: 50%;
    box-shadow: 0 0 20px var(--clr),0 0 40px var(--clr),0 0 60px var(--clr),0 0 80px var(--clr);
}
.niddles {
    position: absolute;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    z-index: 10;
}
.niddles i {
    position: absolute;
    width: 2px;
    background: var(--clr2);
    height: 50%;
    opacity: 0.75;
    border-radius: 6px;
    transform-origin: bottom;
    transform: scaleY(0.5);
}
.niddles.niddles2 {
    width: 170px;
    height: 170px;
    z-index: 9;
}
.niddles.niddles2 i {
    width: 3px;
}
.niddles.niddles3 {
    width: 140px;
    height: 140px;
    z-index: 8;
}
.niddles.niddles3 i {
    width: 4px;
}
#time .time_num {
    position: absolute;
    inset: 55px;
    display: inline-block;
    text-align: center;
    color: #999;
    transform: rotate(calc(30deg * var(--i)));
}
#time .time_num b {
    font-size: 0.75em;
    font-weight: 500;
    display: inline-block;
    transform: rotate(calc(-30deg * var(--i)));
}
.cut-down{
    height: 600px;
    width: 250px;
    float: left;
}
</style>